import React from 'react';
import { Carousel } from 'antd';

import { useEffect, useState } from 'react'
import{base_swiper1} from '../../utils/api'
import { useHistory } from 'react-router-dom';

function Home(props) {
    var history=useHistory()
    const contentStyle = {
        height: '300px',
        color: '#fff',
        lineHeight: '300px',
        textAlign: 'center',
        background: 'blue',
    };
     //引入组件状态
     var [rolelist , setRolelist] = useState([])
    useEffect(() => {
        // history.go(0)
        // console.log('生命周期函数');
        base_swiper1().then((res)=>{
            if(res.data.code===200){
                // console.log(res.data.list);
                setRolelist(res.data.list)
            }
        })
    }, [])


    
    return (
        
        <div className='home'>
            <Carousel autoplay className='box'>{
                rolelist.map((item,index)=>{
                    return(
                        <div key={index}>
                            <h3 style={contentStyle}>
                                <img src={item.img} alt="" />
                            </h3>
                        </div>
                    )
                })
            }
            </Carousel>
            <div className='quanchuang'>系统通知</div>
            <ul>
                <li>2021年11月版本更新说明|呼叫系统</li>
                <li>2021年11月版本更新说明|呼叫系统</li>
                <li>2021年11月版本更新说明|呼叫系统</li>
                <li>2021年11月版本更新说明|呼叫系统</li>
            </ul>
        </div>
    );
}

export default Home;